<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style th:inline="css">
        .c{
            color: [[${session.color}]];
            border: [[${session.money}]]px dashed red;
        }
    </style>
</head>
<body>

<div th:insert="~{frag/nav::nav1}"></div>

<h1>这是test.html</h1>

<p class="c">
    是否登录：
    <th:block th:if="${session.login != null}">
        欢迎回来！<span style="color: blue;" th:text="${session.login}"></span>
        <br/>
        另一种写法：<span th:inline="none">[[${session.login}]]</span> = <b>[[${session.login}]]</b> | [[${session.password}]]
    </th:block>
    <th:block th:if="${session.login == null}">游客请登录！</th:block>
</p>

<p>
    <img th:src="@{/images/head.jpg}" width="100"/>
    <img th:src="${#ctx.#servletContext.contextPath} + @{/images/head.jpg}" width="100"/>
    <img th:src="${#request.contextPath + '/images/head.jpg'}" width="100"/>
</p>

<script th:inline="text">
    // 传递后端的ID到JS代码中
    let username = '[[${session.login}]]'
    let money = [[${session.money}]]
    let len = '[[${session.password}]]'.length
    console.log('登录帐号：', username, money, len)
</script>
<hr/>
<script th:inline="javascript">
    // 后端自动判断类型
    let username1 = [[${session.login}]]
    let money1 = [[${session.money}]]
    let len1 = null
    if ([[${session.password}]] != null) {
        len1 = [[${session.password}]].length
    }
    console.log('登录帐号：', username1, money1, len1)
</script>

<div th:insert="~{frag/nav::footer}"></div>
</body>
</html>